<template>
<!--模态窗 单行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="detailTaskMonitorObj.isShow">
      <div class="modal-ctrl-main odd-row-ctrl">
        <div class="modal-title">
          <p>详情</p>
        </div>
        <div class="btns f-r text-r">
          <button type="button" class="btn btn-info" @click="search">搜索</button>
          <button type="button" class="btn btn-info" @click="clearSearch">清空</button>
        </div>
        <div class="search-time f-r">
          <!-- startTime -->
          <div class="input-group date time-item" id="startTimeId">
            <input type="hidden" ref="startTimeRef" name="birthday">
            <input type="text" ref="startTimeRef" readonly="readonly" id="datetimepicker" class="form-control input-time-show" required="required" data-date-format="dd-mm-yyyy">
            <span class="input-group-addon span-time-icon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
          </div>
          <!-- startTime end-->
          <div style="line-height: 34px;">-</div>
          <!-- endTime -->
          <div class="input-group date time-item "
               id="endTimeId">
            <input type="hidden" name="birthday">
            <input type="text" readonly="readonly" id="endDatetimepicker" class="form-control input-time-show" required="required" data-date-format="dd-mm-yyyy">
            <span class="input-group-addon span-time-icon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
          </div>
          <!-- endTime end-->
        </div>
        <div class="modal-ctrl-content detail-task-table">
          <div class="table-ctrl">
            <!--表格头-->
            <!--{{treeTableRow}}-->
            <div class="table-header">
              <table class="table-default">
                <thead>
                <tr>
                  <th v-for="ths in tableHeader">
                    {{ths.value}}
                  </th>
                </tr>
                </thead>
              </table>
            </div>
            <!--表格中部-->
            <div class="table-overflowX">
              <table class="table-default">
                <tbody>
                <tr
                  v-for="(trs,index) in tableRow.list"
                  @click="selectRow(trs,index)"
                >
                  <td v-for="tds in tableHeader">
                    {{trs[tds.key] | isSucOrfal}}
                  </td>
                </tr>
                </tbody>
              </table>
            </div>

            <!--表格翻页-->
            <Pages
              v-show="tableRow.total !== 0"
              v-if="tableRow.list.length > 0"
              :showItem="10"
              :pageSize="Number(tableRowParams.pageSize)"
              :allDataSum="tableRow.total"
              :allpage="(Math.ceil(tableRow.total/tableRowParams.pageSize))"
              @current-change="tablePageData"
            ></Pages>
          </div>
        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="closeRoleModal">取消</button>
        </div>
        </div>
    </div>
  </transition>
</template>

<script>
  import Pages from "../../sudoku/atom/pages"

  export default {
    name: "detailTaskMonitor",
    props: ['detailTaskMonitorObj'],
    data () {
      return {
        ajaxList: [],
        tableHeader:[
          {"key":"executeTime","value":"执行时间"},
          {"key":"success","value":"结果"},
        ],
        tableRow: {
          list: [],
          total: 0
        },
        tableRowParams : {
          pageIndex:"1", //当前页
          pageSize:"10", //数量
        },
        startTime: '',
        endTime: '',
      }
    },
    components: {
      Pages
    },
    mounted() {
      this.initTimeControl()
    },
    methods: {
      getTableList () {
        // this.s_loading(true)
        let url = this.Beacon +
          '/result/getDetailList?transactionName=' +
          this.detailTaskMonitorObj.id +
          '&startTime=' +
          this.startTime +
          '&endTime=' +
          this.endTime
        let data = {
          size: this.tableRowParams.pageSize,
          current: this.tableRowParams.pageIndex
        }
        this.$axios.post(url,data)
          .then(res => {
            this.tableRow.list = res.data.content.records
            this.ajaxList = res.data.content.records
            this.tableRow.total = res.data.content.total;
            this.s_loading(false)
          })
          .catch(err => {
            this.s_loading(false)
            this.s_alert('查看详情接口出错')
            this.startTime = ''
            $('#datetimepicker')[0].value = ''
            // this.closeRoleModal()
          })
      },
      search() {
        this.getTableList()
      },
      //翻页加载
      tablePageData(page){
        this.tableRowParams.pageIndex = page
        this.getTableList();
        //console.log(page);
      },
      clearSearch () {
        this.startTime = ''
        $('#datetimepicker')[0].value = ''
        this.getTableList()
        // this.tableRow.list = this.ajaxList
      },
      // 时间控件初始化
      initTimeControl(){
        let self = this;
        $(function () {
          $('#startTimeId').datetimepicker({
            language: "zh-CN",
            format: "yyyy-mm-dd hh:ii:ss",
            endDate: new Date(),
            // minView: "month",
            autoclose: true
          }).on("changeDate",function(ev){
            self.startTime = self.$refs.startTimeRef.value;
            $('#endTimeId').datetimepicker('setStartDate',self.startTime);
          });
          $('#endTimeId').datetimepicker({
            language: "zh-CN",
            format: "yyyy-mm-dd hh:ii:ss",
            endDate: new Date(),
            // minView: "month",
            autoclose: true
          }).on("changeDate",function(ev){
            self.endTime =  ev.target.firstElementChild.value;
            $('#startTimeId').datetimepicker('setEndDate', self.endTime);
          });
          // self.$refs.startTimeRef.value = ;
        });

      },
      //关闭弹窗
      closeRoleModal(){
        this.clearData();
        this.$emit("closeModal");
      },
      clearData () {
        this.ajaxList = []
        this.tableRow.list = []
        this.tableRowParams = {
          pageIndex:"1", //当前页
          pageSize:"10", //数量
        }
        this.startTime = ''
        $('#datetimepicker')[0].value = ''
        this.endTime = ''
        $('#endDatetimepicker')[0].value = ''
      }
    },
    filters: {
      isSucOrfal (val) {
        if (val == 0) {
          return '失败'
        } else if (val == 1) {
          return '成功'
        } else {
          return val
        }
      }
    },
    watch: {
      detailTaskMonitorObj: {
        handler(val) {
          if (val.isShow) {
            this.getTableList()
          }
        },
        deep: true
      }
    }
  }
</script>

<style scoped>
  .modal-ctrl-body .modal-ctrl-content.detail-task-table {
    margin: 0;
    max-height: 482px;
  }
  .search-time {
    display: flex;
    width: 410px;
    margin: 4px 10px 0 0;
  }
  .search-time .input-group input {
    border: 1px solid #ccc;
  }
</style>
